<!-- 扫码数据展示确认 -->
<template>
	<view class="page">
		<template>
			<view class="list">
				<view class="">
					<view class="option">
						<view class="lf">单据编号</view>
						<view class="rl">{{ model.billNo }}</view>
					</view>
					<view class="option">
						<view class="lf">单据分类</view>
						<view class="rl">{{ billType(model.billType) }}</view>
					</view>
					<view class="option">
						<view class="lf">申请人/报销人</view>
						<view class="rl">{{ model.reimburser?filterMultiDictText(dictOptions['reimburser'], model.reimburser + ''):'' }}</view>
					</view>
					<view class="option">
						<view class="lf">本次付款/支付金额(元)</view>
						<view class="rl" >{{ model.paymentAmount }}</view>
					</view>
				</view>
			</view>
		</template>
		<view class="btn">
			<view style="height: 20rpx; background-color: #F6F6F6; width: 100%;"></view>
			<view class="button">
				<u-button type="primary" :plain="true" text="取消" @click="close"></u-button>
				<view style="width: 200rpx;"></view>
				<u-button type="primary" text="确认交单" @click="handleConfirm"></u-button>
			</view>
			
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import http from '@/utils/request/index.js'
	import { filterMultiDictText, initDictOptions } from '@/utils/JDictSelectUtil.js'
	export default {
		name: 'ErpFinanceScanForm',
		data() {
			return {
				model: {},
				dictOptions: {},
				filterMultiDictText,
				isData: true // 判断是否有数据  true 代表有 false 代表无
			}
		},
		onLoad(options) {
			this.initDictConfig()
			this.model = options.model ? JSON.parse(options.model) : ''
			
		},
		methods: {
		  close() {
				if (getCurrentPages().length > 1) {
				  uni.navigateBack()
				} else {
				  uni.reLaunch({
				    url: '/pages/home/home',
				  })
				}
				this.$nextTick(() => {
					this.model = {}
				})
		  },
			// 点击确认
			handleConfirm () {
				var _this = this
				var params = Object.assign({}, this.model)
				uni.showModal({
					title: '确认交单',
					content: '是否确认交单？',
					success: (res) => {
						if (res.confirm) {
							http.post('/api/erp/finance/record/erpFinancePaymentAgainstDocumentsRecord/submitDocument', params).then(res => {
								if (res.success) {
									uni.showToast({
										title: res.message,
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none'
									})
								}
							}).finally(() => {
								_this.close()
							})
						} else if (res.cancel) {
							// 用户点击取消
						}
					}
				})
				
			},
			billType (text) {
				var name = ''
				if (text == '1') {
					name = '费用报销申请'
				} else if (text == '2') {
					name = '差旅报销申请'
				} else if (text == '3') {
					name = '付款申请'
				} else if (text == '4') {
					name = '保证金申请'
				} else if (text == '5') {
					name = '借款申请'
				}
				return name
			},
			initDictConfig() {
				initDictOptions('erp_employee_file,name,id').then((res) => {
					if (res.success) {
						this.$set(this.dictOptions, 'reimburser', res.result)
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
.page {
	// padding: 0 20rpx 20rpx 20rpx;
	// width: 100vw;
	height: 100%;
	background: #FFFFFF;
	.list{
		padding: 32rpx 0rpx 20rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
}
.option {
	display: flex;
	margin-bottom: 4rpx;
	width: 750rpx;
	padding: 20rpx;
	margin: 0;
	text-align: right;
	// border-bottom: 1px solid #f6f6f6;
	.lf {
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B2B2B2;
		white-space: nowrap;
	}
	.rl {
		flex: 1;
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #171717;
		margin-left: 16rpx;
	}
}
// 按钮
.btn{
	position: fixed;
	width: 100%;
	bottom: calc( constant(safe-area-inset-bottom) + 20rpx); /* 兼容 iOS < 11.2 */
	bottom: calc( env(safe-area-inset-bottom) + 20rpx); /* 兼容 iOS >= 11.2 */
	border-top: 1px solid #f6f6f6;
	.button {
		padding: 20rpx;
		width: 100%;
		display: flex;
	}
}
</style>

